<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			
		<style type="text/css">
			.add_div,.sub_div{
				width: 140px;
				height: 70px;
				background: red;
			}
			.add_div{
				border-radius: 70px 70px 0 0;
			}
			.sub_div{
				border-radius: 0 0 70px 70px;
			}
			.kong{
				transform: rotate(90deg);
				position: absolute;
				top: -50px;				
			}
			.kong div{
				width: 140px;
				height: 140px;
				background: #ccc;
				transform: rotate(45deg);
				position: relative;
			}
			.zuo{
				top: -29px;
			}
			.you{
				top: 29px;
			}
			
		</style>
	</head>
	<body>
		
		<p>开启状态</p>
		<div class="header">
			<p class="title">智能家居
				<span class="temperature"><span class="number">26</span> ℃</span>
			</p>
			
			<div class="control_1">
				<div class="control_2">
					<div class="add_div"></div>
					<div class="sub_div"></div>
					
					<div class="kong">
						<div class="zuo"></div>
						<div class="you"></div>
					</div>
					
					<!--<div class="control_3">
					</div>-->
				</div>
				
				<!--<div class="control_4">
					<span class="add" onclick="add()">+</span>
					<div class="on_off">
						<img src="img/on.png" width="30px" height="30px"/>
					</div>
					<span class="subtract" onclick="sub()">-</span>
				</div>-->
			</div>
		</div>
		
		
		<hr />
		<hr />
		<hr />
		<hr />
		<hr />
				
	</body>
</html>
<script type="text/javascript">
	
</script>